<template>
  <div class="ydsc-box">
    <pdf-template :hospitalName="basicData.hospitalName" :hospitalPhone="basicData.hospitalPhone"
      :hospitalSite="basicData.hospitalSite">
      <div class="report-page">
        <div class="report-title">
          <div class="title">眼动追踪测评项目评估报告</div>
        </div>
        <div class="user-info">
          <div class="info-list">
            <div class="item-box">
              <div class="item-label">姓名：</div>
              <div class="item-content">{{ basicData.userName }}</div>
            </div>
            <div class="item-box">
              <div class="item-label">性别：</div>
              <div class="item-content">{{ basicData.sex }}</div>
            </div>
            <div class="item-box">
              <div class="item-label">年龄：</div>
              <div class="item-content">{{ basicData.age }}岁</div>
            </div>
            <div class="item-box" style="width: 180px">
              <div class="item-label">测评时间：</div>
              <div class="item-content">{{ basicData.date }}</div>
            </div>
          </div>
        </div>
        <div class="topic-title">
          <img src="@/assets/img/left-icon.png">
          <div class="text-1">眼动追踪测评项目测验结果</div>
        </div>
        <div class="report-content-container">
          <div class="title-1">1、测验结果</div>
          <div class="text-box">
            <div>您本次完成了{{ count }}个测验任务。测验结果如下：</div>
          </div>
          <div class="table-container">
            <div class="caption">
              <p>测评项目</p>
              <p>指标</p>
              <p>值</p>
              <p>参考值</p>
            </div>
            <!--视觉比对-->
            <div class="vpc-container" v-if="types.includes('vpc')">
              <div class="name" :style="{ height: '89px', background: '#F1F7FF', lineHeight: '89px' }">
                视觉配对比较任务VPC
              </div>
              <div class="vpc-content">
                <div class="news-focus">
                  <div>Memory score记忆得分</div>
                  <div>{{ vpc.items[0] }}</div>
                  <div>&gt;&nbsp;0.104</div>
                </div>
                <div class="memory">
                  <div>Decay rate记忆衰减系数(%/s)</div>
                  <div>{{ Math.round(vpc.items[1]*100) }}</div>
                  <div>&gt;&nbsp;-41.5</div>
                </div>
              </div>
            </div>
            <!--反向眼跳-->
            <div class="ant-container" v-if="types.includes('ant')">
              <div class="name"
                :style="{ height: ((42 + 4) * 4) + 'px', background: '#F1F7FF', lineHeight: ((42 + 4) * 4) + 'px' }">
                反眼跳任务AntiSacaade
              </div>
              <div class="ant-content">
                <div class="saccade">
                  <div>Saccade latency扫视潜伏期(ms)</div>
                  <div>{{ Math.round(ant.items[0]*1000) }}</div>
                  <div>&lt;&nbsp;908</div>
                </div>
                <div class="miss">
                  <div>Miss rate无反应眼跳率(%) </div>
                  <div>{{ Math.round(ant.items[1]*100) }}</div>
                  <div>&lt;&nbsp;14</div>
                </div>
                <div class="direction">
                  <div>Direction error错误率(%)</div>
                  <div>{{ Math.round(ant.items[2]*100) }}</div>
                  <div>&lt;&nbsp;80.2</div>
                </div>
                <div class="land">
                  <div>Landing error落点位置偏差度(°)</div>
                  <div>{{ ant.items[3] }}</div>
                  <div>&lt;&nbsp;0.957</div>
                </div>
              </div>
            </div>
            <!--视空间追踪-->
            <div class="vmt-container" v-if="types.includes('vmt')">
              <div class="name" :style="{ height: 46 + 'px', background: '#F1F7FF', lineHeight: 46 + 'px' }">
                视觉空间追踪任务VisMET</div>
              <div class="vmt-content">
                <div>Memory score记忆得分</div>
                <div>{{ vmt.items[0] }}</div>
                <div>&gt;&nbsp;0.032</div>
              </div>
            </div>
          </div>
          <div class="report-content-container">
            <div class="title-1">2、眼动详细数据</div>
            <div class="text-box" v-if="flag=== 0 || flag === 1 || flag === 5 ||flag === 6">
              <div class="title">2.1&nbsp;&nbsp;&nbsp;视觉配对比较任务VPC</div>
              <div class="result">
                <img src="../../../assets/img/description.png" alt="" class="icon">
                任务说明
              </div>
              <div class="paragraph">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;视觉配对比较任务主要评估个体记忆和识别先前观看过的图片的能力,它通常包含熟悉和再认两个阶段。个体在熟悉阶段会看到两张相同的图片(旧图)。间隔一段时间之后，这两张图片中的一张会被替换成个体没有见过的新图片(新图)。<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MCI或早期AD患者识别熟悉图片的能力会下降。健康个体通过对新图像表现出强烈偏好，而MCI或AD患者的新奇偏好减少。VPC任务能够在个体出现严重认知障碍前检测到记忆和认知能力的衰退，是对MCI进行早期检测的有效且客观工具。
              </div>
              <div class="result">
                <img src="../../../assets/img/result.png" alt="" class="icon">
                结果
              </div>
              <div class="result-content">
                <div class="result-item">
                  <div class="leftdesc">
                    Memory score记忆得分: {{ vpc.items[0] }}
                  </div>
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="progress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gpm">
                      <div class="fontDesc">{{ vpc.items[0] }}</div>
                    </div>
                    <p class="refers">参考值：0.104</p>
                  </div>
                </div>
                <div class="result-item">
                  <div class="leftdesc">
                    Decay rate记忆衰减系数(%/s): {{ Math.round(vpc.items[1]*100) }}
                  </div>
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="progress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gps">
                      <div class="fontDesc">{{ Math.round(vpc.items[1]*100) }}</div>
                    </div>
                    <p class="refers">参考值：- 41.5</p>
                  </div>
                </div>
              </div>
              <div class="results">
                <img src="../../../assets/img/record.png" alt="" class="icon">
                结果说明
              </div>
              <!-- <p class="resultDesc" v-if="vpc.items[0] > 0.104 && Math.round(vpc.items[1]*100) > -41.5">您的得分高于参考值，认知功能良好。</p>
              <p class="resultDesc" v-else>您的得分低于参考值，请做进一步的检查确认MCI风险</p> -->
              <p class="resultDesc">您的得分高于参考值，认知功能良好。</p>
            </div>
            <div class="text-box" v-if="flag === 2 || flag === 4 ">
              <div class="title">2.1&nbsp;&nbsp;&nbsp;反眼跳任务AntiSacaade</div>
              <div class="result">
                <img src="../../../assets/img/description.png" alt="" class="icon">
                任务说明
              </div>
              <div class="paragraph">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;反向眼跳任务（Anti-saccade
                task）是一种眼动任务，用于测量个体抑制由外周突现刺激诱发的反射性扫视的能力。在反向眼跳任务中，一个突显的视觉目标会随机出现在屏幕一侧,
                个体需要把视线指向目标对侧，而不是指向目标。反向眼跳任务是一种用于评估抑制控制、注意力和执行功能的灵敏工具。这些认知功能在轻度认知障碍（MCI）和早期阿尔茨海默病（AD）患者中通常有一定程度的损害，在反向眼跳任务中过高的错误率是MCI的常见特征，而遗忘型MCI患者（aMCI）出错时还很少更正视线方向到正确位置。
              </div>
              <div class="result">
                <img src="../../../assets/img/result.png" alt="" class="icon">
                结果
              </div>
              <div class="result-content">
                <div class="result-item">扫视潜伏期(ms): 目标出现到眼动开始的时间间隔
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="proGress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gpss1">
                      <div class="fontDesc">{{ Math.round(ant.items[0]*1000) }}</div>
                    </div>
                    <p class="refer">参考值:908</p>
                  </div>
                </div>
                <div class="result-item">无反应眼跳率(%):没有任何反应一直看屏幕中央的百分比
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="proGress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gpss2">
                      <div class="fontDesc">{{ Math.round(ant.items[1]*100) }}</div>
                    </div>
                    <p class="refer">参考值:14</p>
                  </div>
                </div>
                <div class="result-item">错误率(%):是跳到标记物位置的百分比
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="proGress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gpss3">
                      <div class="fontDesc">{{ Math.round(ant.items[2]*100) }}</div>
                    </div>
                    <p class="refer">参考值:80.2</p>
                  </div>
                </div>
                <div class="result-item">落点位置偏差度(deg): 眼跳的真实落点和正确目标位置间的距离
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="proGress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gpss">
                      <div class="fontDesc">{{ ant.items[3] }}</div>
                    </div>
                    <p class="refer">参考值:0.957</p>
                  </div>
                </div>
              </div>
              <div class="results">
                <img src="../../../assets/img/record.png" alt="" class="icon">
                结果说明
              </div>
              <!-- <p class="resultDesc">您的得分低于参考值，认知功能良好。</p> -->
              <p class="resultDesc"
                v-if="Math.round(ant.items[0]*1000) > 908 && Math.round(ant.items[1]*100) > 14 && Math.round(ant.items[2]*100) > 80.2 && ant.items[3] > 0.957">
                您的得分高于参考值，请做进一步的检查确认MCI风险。</p>
              <p class="resultDesc" v-else>您的得分低于参考值，认知功能良好</p>
            </div>
            <div class="text-box" v-if="flag === 3 ">
              <div class="title">2.1&nbsp;&nbsp;&nbsp;视觉空间追踪任务VisMET</div>
              <div class="result">
                <img src="../../../assets/img/description.png" alt="" class="icon">
                任务说明
              </div>
              <div class="paragraph">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;视觉空间追踪任务（Visuospatial Memory Eye-Tracking, VisMET）
                是一种可用于估轻度记忆损伤的易用且敏感的工具。该任务包含编码和再认两个阶段。
                在编码阶段，个体自由观看一组图片。在再认阶段，个体观看被修改过的同一组图片
                （添加、移动或移除部分图片元素）。通过测量个体注视被修改过的图片区域的时长，
                可评估其视觉空间记忆能力。健康个体和轻度认知障碍（MCI）或阿尔茨海默病（AD）
                患者在VisMET任务上的记忆表现存在显著差异。VisMET可以作为一种灵敏的诊断工具，
                评估多种不同的记忆能力。
              </div>
              <div class="result">
                <img src="../../../assets/img/result.png" alt="" class="icon">
                结果
              </div>
              <div class="result-content">
                <div class="result-item">
                  <div class="leftdesc">
                    Memory score:记忆得分:
                  </div>
                  <div class="bgimg">
                    <div class="finally">
                      <img src="../../../assets/img/bar.png" alt="" class="progress">
                    </div>
                    <div class="gp">
                      <img src="../../../assets/img/fixed.png" alt="" class="gps">
                      <div class="fontDesc">{{ vmt.items[0] }}</div>
                    </div>
                    <p class="refers">参考值:0.032</p>
                  </div>
                </div>
              </div>
              <div class="results">
                <img src="../../../assets/img/record.png" alt="" class="icon">
                结果说明
              </div>
              <p class="resultDesc">您的得分高于参考值，认知功能良好。</p>
              <div class="result">
                <img src="../../../assets/img/data.png" alt="" class="icon">
                图例详解
              </div>
              <div class="img-container">
                <div class="left-container">
                  <p>注视点分布</p>
                  <img :src="vmt.leftUrl" />
                  <div class="desc">
                    <p>彩色框表示十组图片中的每组变化的关键区域，<br>彩色点代表眼睛的注视位置。</p>
                  </div>
                </div>
                <div class="right-container">
                  <p>关键区域时间</p>
                  <img :src="vmt.rightUrl" />
                  <div class="desc">
                    <p>柱状图表示十组图片中，每组看关键区域时间的百分比，Memory score是这
                      十组图片看关键区域时间百分比的平均值。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </pdf-template>
    <pdf-template :hospitalName="basicData.hospitalName" :hospitalPhone="basicData.hospitalPhone"
      :hospitalSite="basicData.hospitalSite" v-if="isShow">
      <div class="report-page">
        <div class="report-content-container">
          <div class="text-box" v-if="flag === 0  || flag === 6">
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>注视点分布</p>
                <img :src="vpc.leftUrl" />
                <div class="desc">
                  <p>前后两组图片中，眼睛注视在旧图和新图上<br>的注视点分布情况。十种颜色代表十组图片<br>的注视情况。</p>
                </div>
              </div>
              <div class="right-container">
                <p>新图注视率</p>
                <img :src="vpc.rightUrl" />
                <div class="desc">
                  <p>通过眼睛注视在新图和旧图上的时间比值，拟合出此曲<br>
                    线。曲线向上趋势，代表认知功能良好，曲线向下趋势<br>代表有MCI的风险，后续需要进一步检查。</p>
                </div>
              </div>
            </div>

            <div class="title">2.2&nbsp;&nbsp;&nbsp;反眼跳任务AntiSacaade</div>
            <div class="result">
              <img src="../../../assets/img/description.png" alt="" class="icon">
              任务说明
            </div>
            <div class="paragraph">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;反向眼跳任务（Anti-saccade
              task）是一种眼动任务，用于测量个体抑制由外周突现刺激诱发的反射性扫视的能力。在反向眼跳任务中，一个突显的视觉目标会随机出现在屏幕一侧,
              个体需要把视线指向目标对侧，而不是指向目标。反向眼跳任务是一种用于评估抑制控制、注意力和执行功能的灵敏工具。这些认知功能在轻度认知障碍（MCI）和早期阿尔茨海默病（AD）患者中通常有一定程度的损害，在反向眼跳任务中过高的错误率是MCI的常见特征，而遗忘型MCI患者（aMCI）出错时还很少更正视线方向到正确位置。
            </div>
            <div class="result">
              <img src="../../../assets/img/result.png" alt="" class="icon">
              结果
            </div>
            <div class="result-content">
              <div class="result-item">扫视潜伏期(ms): 目标出现到眼动开始的时间间隔
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="proGress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gpss1">
                    <div class="fontDesc">{{ Math.round(ant.items[0]*1000) }}</div>
                  </div>
                  <p class="refer">参考值:908</p>
                </div>
              </div>
              <div class="result-item">无反应眼跳率(%):没有任何反应一直看屏幕中央的百分比
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="proGress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gpss2">
                    <div class="fontDesc">{{ Math.round(ant.items[1]*100) }}</div>
                  </div>
                  <p class="refer">参考值:14</p>
                </div>
              </div>
              <div class="result-item">错误率(%):是跳到标记物位置的百分比
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="proGress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gpss3">
                    <div class="fontDesc">{{ Math.round(ant.items[2]*100) }}</div>
                  </div>
                  <p class="refer">参考值:80.2</p>
                </div>
              </div>
              <div class="result-item">落点位置偏差度(deg): 眼跳的真实落点和正确目标位置间的距离
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="proGress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gpss">
                    <div class="fontDesc">{{ ant.items[3] }}</div>
                  </div>
                  <p class="refer">参考值:0.957</p>
                </div>
              </div>
            </div>
            <div class="results">
              <img src="../../../assets/img/record.png" alt="" class="icon">
              结果说明
            </div>
            <p class="resultDesc"
              v-if="Math.round(ant.items[0]*1000) > 908 && Math.round(ant.items[1]*100) > 14 && Math.round(ant.items[2]*100) > 80.2 && ant.items[3] > 0.957">
              您的得分高于参考值，请做进一步的检查确认MCI风险。</p>
            <p class="resultDesc" v-else>您的得分低于参考值，认知功能良好</p>
            <!-- <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div> -->
            <div class="img-container">
              <div class="left-container">
                <p>Gap轨迹：Gap(注视点在目标出现前会消失)情况下眼动轨迹</p>
                <img :src="ant.leftUrl" />
                <!-- <div class="desc">
                  <p>Gap(注视点在目标出现前会消失)情况下眼动轨迹</p>
                </div> -->
              </div>
              <div class="right-container">
                <p>Overlap轨迹：Overlap(目标出现后,注视点还会呈现一段时间)情况下眼动轨迹图</p>
                <img :src="ant.rightUrl" />
                <!-- <div class="desc">
                  <p>Overlap(目标出现后,注视点还会呈现一段时间)情况下眼动轨迹图</p>
                </div> -->
              </div>
            </div>
          </div>
          <div class="text-box" v-if=" flag === 4  || flag === 5">
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container" v-if="types[1] === 'ant'">
              <div class="left-container">
                <p>Gap轨迹</p>
                <img :src="ant.leftUrl" />
                <div class="desc">
                  <p>Gap(注视点在目标出现前会消失)情况下眼动轨迹</p>
                </div>
              </div>
              <div class="right-container">
                <p>Overlap轨迹</p>
                <img :src="ant.rightUrl" />
                <div class="desc">
                  <p>Overlap(目标出现后,注视点还会呈现一段时间)情况下眼动轨迹图</p>
                </div>
              </div>
            </div>


            <!-- 起始 -->
            <div class="img-container" v-else>
              <div class="left-container">
                <p>注视点分布</p>
                <img :src="vpc.leftUrl" />
                <div class="desc">
                  <p>前后两组图片中，眼睛注视在旧图和新图上<br>的注视点分布情况。十种颜色代表十组图片<br>的注视情况。</p>
                </div>
              </div>
              <div class="right-container">
                <p>新图注视率</p>
                <img :src="vpc.rightUrl" />
                <div class="desc">
                  <p>通过眼睛注视在新图和旧图上的时间比值，拟合出此曲<br>
                    线。曲线向上趋势，代表认知功能良好，曲线向下趋势<br>代表有MCI的风险，后续需要进一步检查。</p>
                </div>
              </div>
            </div>
            <!-- 终止 -->

            <div class="title">{{flag===0?'2.3':'2.2'}}&nbsp;&nbsp;&nbsp;视觉空间追踪任务VisMET</div>
            <div class="result">
              <img src="../../../assets/img/description.png" alt="" class="icon">
              任务说明
            </div>
            <div class="paragraph">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;视觉空间追踪任务（Visuospatial Memory Eye-Tracking, VisMET）
              是一种可用于估轻度记忆损伤的易用且敏感的工具。该任务包含编码和再认两个阶段。
              在编码阶段，个体自由观看一组图片。在再认阶段，个体观看被修改过的同一组图片
              （添加、移动或移除部分图片元素）。通过测量个体注视被修改过的图片区域的时长，
              可评估其视觉空间记忆能力。健康个体和轻度认知障碍（MCI）或阿尔茨海默病（AD）
              患者在VisMET任务上的记忆表现存在显著差异。VisMET可以作为一种灵敏的诊断工具，
              评估多种不同的记忆能力。
            </div>
            <div class="result">
              <img src="../../../assets/img/result.png" alt="" class="icon">
              结果
            </div>
            <div class="result-content">
              <div class="result-item">
                <div class="leftdesc">
                  Memory score:记忆得分:
                </div>
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="progress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gps">
                    <div class="fontDesc">{{ vmt.items[0] }}</div>
                  </div>
                  <p class="refers">参考值:0.032</p>
                </div>
              </div>
            </div>
            <div class="results">
              <img src="../../../assets/img/record.png" alt="" class="icon">
              结果说明
            </div>
            <p class="resultDescd">您的得分高于参考值，认知功能良好。</p>
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>注视点分布</p>
                <img :src="vmt.leftUrl" />
                <div class="desc">
                  <p>彩色框表示十组图片中的每组变化的关键区域，<br>彩色点代表眼睛的注视位置。</p>
                </div>
              </div>
              <div class="right-container">
                <p>关键区域时间</p>
                <img :src="vmt.rightUrl" />
                <div class="desc">
                  <p>柱状图表示十组图片中，每组看关键区域时间的百分比，Memory<br>score是这
                    十组图片看关键区域时间百分比的平均值。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </pdf-template>
    <!-- 三个任务 -->
    <pdf-template :hospitalName="basicData.hospitalName" :hospitalPhone="basicData.hospitalPhone"
      :hospitalSite="basicData.hospitalSite" v-if="isShowed" class="mp">
      <div class="report-page">
        <div class="report-content-container">
          <div class="text-box">
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>Gap轨迹</p>
                <img :src="ant.leftUrl" />
                <div class="desc">
                  <p>Gap(注视点在目标出现前会消失)情况下眼动轨迹</p>
                </div>
              </div>
              <div class="right-container">
                <p>Overlap轨迹</p>
                <img :src="ant.rightUrl" />
                <div class="desc">
                  <p>Overlap(目标出现后,注视点还会呈现一段时间)情况下眼动轨迹图</p>
                </div>
              </div>
            </div>
            <div class="title">{{flag===0?'2.3':'2.2'}}&nbsp;&nbsp;&nbsp;视觉空间追踪任务VisMET</div>
            <div class="result">
              <img src="../../../assets/img/description.png" alt="" class="icon">
              任务说明
            </div>
            <div class="paragraph">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;视觉空间追踪任务（Visuospatial Memory Eye-Tracking, VisMET）
              是一种可用于估轻度记忆损伤的易用且敏感的工具。该任务包含编码和再认两个阶段。
              在编码阶段，个体自由观看一组图片。在再认阶段，个体观看被修改过的同一组图片
              （添加、移动或移除部分图片元素）。通过测量个体注视被修改过的图片区域的时长，
              可评估其视觉空间记忆能力。健康个体和轻度认知障碍（MCI）或阿尔茨海默病（AD）
              患者在VisMET任务上的记忆表现存在显著差异。VisMET可以作为一种灵敏的诊断工具，
              评估多种不同的记忆能力。
            </div>
            <div class="result">
              <img src="../../../assets/img/result.png" alt="" class="icon">
              结果
            </div>
            <div class="result-content">
              <div class="result-item">
                <div class="leftdesc">
                  Memory score:记忆得分:
                </div>
                <div class="bgimg">
                  <div class="finally">
                    <img src="../../../assets/img/bar.png" alt="" class="progress">
                  </div>
                  <div class="gp">
                    <img src="../../../assets/img/fixed.png" alt="" class="gps">
                    <div class="fontDesc">{{ vmt.items[0] }}</div>
                  </div>
                  <p class="refers">参考值:0.032</p>
                </div>
              </div>
            </div>
            <div class="results">
              <img src="../../../assets/img/record.png" alt="" class="icon">
              结果说明
            </div>
            <p class="resultDesc">您的得分高于参考值，认知功能良好。</p>
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>注视点分布</p>
                <img :src="vmt.leftUrl" />
                <div class="desc">
                  <p>彩色框表示十组图片中的每组变化的关键区域，<br>彩色点代表眼睛的注视位置。</p>
                </div>
              </div>
              <div class="right-container">
                <p>关键区域时间</p>
                <img :src="vmt.rightUrl" />
                <div class="desc">
                  <p>柱状图表示十组图片中，每组看关键区域时间的百分比，Memory<br>score是这
                    十组图片看关键区域时间百分比的平均值。</p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </pdf-template>
    <!-- 单个任务 -->
    <pdf-template :hospitalName="basicData.hospitalName" :hospitalPhone="basicData.hospitalPhone"
      :hospitalSite="basicData.hospitalSite" v-if="isShows">
      <div class="report-page">
        <div class="report-content-container">
          <div class="text-box" v-if="flag=== 0 || flag === 1 || flag === 5 ||flag === 6">
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>注视点分布</p>
                <img :src="vpc.leftUrl" />
                <div class="desc">
                  <p>前后两组图片中，眼睛注视在旧图和新图上<br>的注视点分布情况。十种颜色代表十组图片<br>的注视情况。</p>
                </div>
              </div>
              <div class="right-container">
                <p>新图注视率</p>
                <img :src="vpc.rightUrl" />
                <div class="desc">
                  <p>通过眼睛注视在新图和旧图上的时间比值，拟合出此曲<br>
                    线。曲线向上趋势，代表认知功能良好，曲线向下趋势<br>代表有MCI的风险，后续需要进一步检查。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="text-box" v-if="flag === 2">
            <div class="result">
              <img src="../../../assets/img/data.png" alt="" class="icon">
              图例详解
            </div>
            <div class="img-container">
              <div class="left-container">
                <p>Gap轨迹</p>
                <img :src="ant.leftUrl" />
                <div class="desc">
                  <p>Gap(注视点在目标出现前会消失)情况下眼动轨迹</p>
                </div>
              </div>
              <div class="right-container">
                <p>Overlap轨迹</p>
                <img :src="ant.rightUrl" />
                <div class="desc">
                  <p>Overlap(目标出现后,注视点还会呈现一段时间)情况下眼动轨迹图</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </pdf-template>
  </div>
</template>

<script setup>
import pdfTemplate from '@/components/pdfTemplate/index.vue'
import { ref, reactive } from 'vue'
// import {ILoadFileParams} from '@/types/report'
import { useRoute } from 'vue-router'
import { getPdfData } from '@/api/report/index'
const isShow = ref(false)
const isShows = ref(false)
const isShowed = ref(false)
//下载文件参数
const route = useRoute()
const downLoadParams = reactive({
  taskType: 1,
  taskid: ''
})
downLoadParams.taskid = route.query.taskId 
let vpc = reactive({
  items: [],
  leftUrl: '',
  rightUrl: '',
  option: ''
})
let ant = reactive({
  items: [],
  leftUrl: '',
  rightUrl: '',
  option: ''
})
let vmt = reactive({
  items: [],
  leftUrl: '',
  rightUrl: '',
  option: ''
})
const basicData = reactive({
  age: 0,
  date: '',
  sex: '',
  userName: '',
  hospitalName:'',
  hospitalPhone:'',
  hospitalSite:''
})
const count = ref(0)
const types = ref([])
const flag = ref(-1)
getPdfData(downLoadParams).then(res => {
  const { age, date, hospitalName, hospitalPhone, hospitalSite, sex, userName, tasks, options } = res.data.result
  basicData.hospitalName= hospitalName
  basicData.hospitalPhone =hospitalPhone
  basicData.hospitalSite = hospitalSite
  types.value = options
  basicData.age = age
  basicData.date = date
  basicData.sex = sex
  basicData.userName = userName
  count.value = res.data.result.options.length
  const _index = ref(-1)
  if(types.value.length === 3){
    isShow.value = true
    isShowed.value = true
    flag.value = 0
  }else if(types.value.length === 1){
    isShow.value =false
    // isShows.value = true
    if(types.value.includes('vpc')){          // vpc视觉比对
      flag.value = 1
    isShows.value = true
    }else if(types.value.includes('ant')){    // ant反眼跳
      flag.value = 2
    isShows.value = true
    }else if(types.value.includes('vmt')){      // 视觉空间
      flag.value = 3
    // isShows.value = true
    }
  }else if(types.value.length === 2){
    isShow.value = true
    if(!types.value.includes('vpc')){
      flag.value = 4
    }else if(!types.value.includes('ant')){
      flag.value = 5
    }else{
      flag.value = 6
    }
  }
  for (let i = 0; i < options.length; i++) {
    if (options[i] == 'vpc') {
      _index.value = i
      for (let j = 0; j < tasks.length; j++) {
        if (_index.value == j) {
          vpc.items = tasks[j].items
          vpc.leftUrl = tasks[j].leftUrl
          vpc.rightUrl = tasks[j].rightUrl
        }
      }
    } else if (options[i] == 'ant') {
      _index.value = i
      for (let j = 0; j < tasks.length; j++) {
        if (_index.value == j) {
          ant.items = tasks[j].items
          ant.leftUrl = tasks[j].leftUrl
          ant.rightUrl = tasks[j].rightUrl
        }
      }
    } else if(options[i] == 'vmt') {
      _index.value = i
      for (let j = 0; j < tasks.length; j++) {
        if (_index.value == j) {
          vmt.items = tasks[j].items
          vmt.leftUrl = tasks[j].leftUrl
          vmt.rightUrl = tasks[j].rightUrl
        }
      }
    }
  }
})

</script>

<style lang="scss" scoped>
@import './css.scss';
.mp {
  margin-top: 70px;
}
</style>
